import React, { Component } from 'react';
import ServiceName from './serviceName'
import ServiceItem from './serviceItem'



class service extends Component {
    constructor(props) {
        super(props);
        this.state={
            serviceName:'',
            serviceList:['你好']
        }
    }

    onInput(e){
        this.setState({
            serviceName:e.target.value
        })
    }

    addServices(){
        // 性能问题
        let list=this.state.serviceList
        list.push(this.state.serviceName)
        this.setState({
            serviceList:list,
            // 添加完后清空input框的内容
            serviceName:''
        })
        
        
    }

    delService(index){
        console.log(index);
        let list=this.state.serviceList
        list.splice(index,1)
        this.setState({
            serviceList:list
        })
    }

    render() { 
        return (
            <div>
                <p>这是拆分后的service组件</p>
                <ServiceName addServices={this.addServices.bind(this)} serviceName={this.state.serviceName} onInput={this.onInput.bind(this)}/>
                <ServiceItem serviceList={this.state.serviceList}  delService={this.delService.bind(this)}/>
            </div>
        );
    }
}
 
export default service;